import { cn } from "@/lib/utils";
import { forwardRef, Ref } from "react";
import { Input, InputProps } from "./input1";
import { Label } from "../label/label";

interface LabelInputProps extends InputProps {
  label?: string;
  labelPosition?: "top" | "left";
}

const LabelInput = forwardRef(
  (
    { className = "", label, labelPosition = "top", ...props }: LabelInputProps,
    ref: Ref<HTMLInputElement>,
  ) => (
    <div
      className={cn(
        "flex gap-2",
        {
          "flex-col": labelPosition === "top",
          "items-center gap-2": labelPosition === "left",
        },
        className,
      )}
    >
      <Label htmlFor={props.id}>{label}</Label>
      <Input ref={ref} {...props} />
    </div>
  ),
);
LabelInput.displayName = "LabelInput";

export { LabelInput };
